<?php
/**
 * @var $this Controller
 * @var $cs   CClientScript
 */

$cs = Yii::app()->clientScript;
$cs->registerScriptFile('/js/underscore-min.js');
$cs->registerScriptFile('/js/jqueryui/jquery-ui-1.8.23.custom.min.js');
$cs->registerCssFile('/js/jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css');
$cs->registerScriptFile('/js/json2.js');
$cs->registerScriptFile('/js/todo.storage.js');
$cs->registerScriptFile('/js/todo.js');

$cs->registerScript('TodoInit', <<<EOF
if (isLocalStorageAvailable()) {
    var todo = new TodoItems();
} else {
    $('body').html('Ваш браузер не поддерживает LocalStorage.');
}
EOF
);

$this->pageTitle = Yii::app()->name;
?>

<header>
    <div class="inpad">
        <span class="user">
            <?php
            $this->renderPartial('//partials/auth');
            ?>
        </span>

        <h1>TODDO</h1>
    </div>
</header>

<article>
    <div id="notification" style="display: none"></div>
    <section id="newitem">
        <div class="input">
            <input id="mic" type="text" x-webkit-speech="x-webkit-speech" lang="ru"/>
            <textarea id="name" placeholder="Посадить дерево" autofocus="autofocus" rows="1" tabindex="1"></textarea>
            <a href="#" class="clear"></a>
        </div>

        <span id="clone"></span>
        <span id="return"></span>
    </section>
    <ul class="list default" id="lists"></ul>
    <div class="buffer"></div>
</article>
<div id="footer">.</div>
<script type="text/javascript">
    <?php
    $storageKey = md5(Yii::app()->user->service . Yii::app()->user->id);
    ?>
    var storageKey = <?php echo json_encode($storageKey) ?>;

</script>
<script type="text/template" id="main-template">
    <%= renderCategory({category: {id: null, name: null}}) %>
    <% _ . each(categories, function (category, key) { %>
        <%= renderCategory({category: category}) %>
    <% }) %>
</script>
<script type="text/template" id="category-template">
    <li class="category" data-category-id="<%= category.id %>">
        <% if(category.name != null) {%>
            <p class="title"><span class="drag"></span><%= category.name.replace(/@.+/, '') %></p>
        <%}%>
        <% if(false) { //disabled %>
        <div class="title">
                <textarea><%= category.name %></textarea>
                <span><%= category.name.replace(/@.+/, '') %></span>
        </div>
        <%}%>
        <% _ . each(['due', 'date', 'other'], function (cls) { %>
            <% var filteredItems = filterItems({categoryId: category.id, type: cls})%>
            <% if(filteredItems.length > 0) { %>
                <ul class="<%= cls %>">
                    <% _ . each(filteredItems, function (item, key) { %>
                        <%= renderItem({item: item}) %>
                    <% }) %>
                </ul>
            <% } %>
        <% }) %>
    </li>
</script>
<script type="text/template" id="item-template">
    <% if (item && !item.deleted && !item.completed) { %>
        <li class="item" data-item-id="<%= item . id %>"><!--
            --><p><!--
                --><span class="drag"></span><!--
                --><label><em class="check"></em></label><!--
                --><%= item . name .replace(/#([\d]{2})\/([\d]{2})$/, '').replace(/#([\d]{2})\/([\d]{2})/g, '$1/$2').replace(/@.+/, '') %><!--
                --><em><%= item . deadline ? item . deadline : '' %></em><!--
            --></p><!--
            --><p class="edit"><!--
                --><button><em class="delete"></em></button><!--
                --><textarea rows="1" style="width: 460px;"><%= item . name %></textarea><!--
            --></p><!--
        --></li>
    <% } %>
</script>
<script type="text/template" id="notification-error-sync">
    <div class="message">
        <p>
            <% if (parseInt(timeLeft) > 0) { %>
            Синхронизация не производится.
            Соединение через <%= timeLeft %> с.
            <a href="javascript: void(0)" class="resync-link">Повторить</a>
            <% } else { %>
            Попытка соединения с сервером...
            <% } %>
        </p>
    </div>
</script>